<template>
  <div>
    <router-link to="/seach" class="home_seach">
      <div>
        <img :src="imgarr.img01" alt="">
        <span>搜索商品</span>
      </div>
    </router-link>

    <div class="home_swiper">
      <div v-show="bannerList" class="swiper-container swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in bannerList" >
            <img :src="item.pic" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <ul class="home_list">
      <li>
        <router-link to="">
          <img :src="imgarr.img02" alt="">
          <span>推荐</span>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="imgarr.img03" alt="">
          <span>热门</span>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="imgarr.img04" alt="">
          <span>优选</span>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="imgarr.img05" alt="">
          <span>发现</span>
        </router-link>
      </li>
    </ul>

    <div class="home_img">
      <img :src="imgarr.img06" alt="">
      <img :src="imgarr.img07" alt="">
    </div>

    <div class="home_product">
      <div class="home_product_top">数码3c</div>
      <img class="home_product_img" :src="imgarr.img08" alt="">
      <ul class="home_product_ul">
        <li v-for="item in productList1"><tmp :list='item'></tmp></li>
      </ul>
    </div>

    <div class="home_product">
      <div class="home_product_top">手机</div>
      <img class="home_product_img" :src="imgarr.img09" alt="">
      <ul class="home_product_ul">
        <li v-for="item in productList2"><tmp :list='item'></tmp></li>
      </ul>
    </div>
  </div>
</template>

<script>
import tmp from './productlist.vue'
import '../common/css/swiper.css'
import Swiper from 'swiper'
import img01 from '../common/images/search.png'
import img02 from '../common/images/icon-1.png'
import img03 from '../common/images/icon-2.png'
import img04 from '../common/images/icon-3.png'
import img05 from '../common/images/icon-4.png'
import img06 from '../common/images/images_02.jpg'
import img07 from '../common/images/images_05.jpg'
import img08 from '../common/images/images_08.jpg'
import img09 from '../common/images/images_15.png'
const axios = require('axios')
export default {
  data () {
    return {
      a: 1,
      imgarr: {
        img01,
        img02,
        img03,
        img04,
        img05,
        img06,
        img07,
        img08,
        img09
      },
      bannerList: [],
      pagesize: 6,
      productList1: [],
      productList2: []
    }
  },
  components: {
    tmp
  },
  methods: {
    http (url, cid, pagesize, callback) {
      var urls = url + '/cid/' + cid + '/pagesize/' + pagesize
      // console.log(urls)
      // const data = new URLSearchParams()
      // data.append('cid', cid)
      // data.append('pagesize', pagesize)
      axios.post('/api/' + urls).then(e => {
        // console.log(e)
        callback(e.data)
      })
    },
    BannersetData (obj) {
      // console.log(obj)
      this.bannerList = obj
    },
    Product1setData (obj) {
      // console.log(obj)
      this.productList1 = obj
    },
    Product2setData (obj) {
      // console.log(obj)
      this.productList2 = obj
    }
  },
  mounted () {
    var swiper1 = new Swiper('.swiper1', {
      autoplay: true,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  },
  updated () {
    // if (this.a == 1 && this.bannerList) {
    //   swiper1 = new Swiper('.swiper1', {
    //     autoplay: true,
    //     pagination: {
    //       el: '.swiper-pagination',
    //       clickable: true
    //     }
    //   })
    //   this.a = 2
    // }
  },
  created () {
    this.http('fetchSlide', '', '', this.BannersetData)
    this.http('goodsList', '58,59', this.pagesize, this.Product1setData)
    this.http('goodsList', '15,16,17,20,21', this.pagesize, this.Product2setData)
  }
}
</script>

<style>
.home{
  width: 7.5rem;
}
.home_seach{
  width: 100%;
  height: 1rem;
  background-color: #f56d02;
  display: block;
  display: flex;
  justify-content: center;
}
.home_seach div{
  width: 6.9rem;
  height: 0.8rem;
  background-color: rgba(255, 255, 255, .9);
  margin: auto;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home_seach div img{
  display: block;
  width: 0.36rem;
  height: 0.36rem;
}
.home_seach div span{
  font-size: 0.14rem;
  color: #999999;
  margin-left: 0.2rem;
}

.home_swiper{
  width: 100%;
  height: 4rem;
}
.swiper1{
  width: 100%;
  height: 100%;
}
.swiper-slide img{
  width: 7.5rem;
}

.home_list{
  width: 6.9rem;
  height: 1.9rem;
  padding: 0.3rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}
.home_list li{
  width: 1.08rem;
  height: 100%;
}
.home_list li a{
  width: 1.08rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.home_list li a img{
  width: 1.08rem;
  height: 1.08rem;
}.home_list li a span{
  font-size: 14px;
  color: #222222;
}

.home_img{
  margin-top: 0.2rem;
  width: 100%;
  height: 2.6rem;
  display: flex;
  justify-content: space-between;
}
.home_img img{
  width: 3.72rem;
}

.home_product{
  width: 100%;
  height: auto;
  margin: 0.2rem auto 0;
  background-color: #ffffff;
}
.home_product_top{
  width: 7.1rem;
  height: 0.8rem;
  padding-left: 0.4rem;
  font-size: 16px;
  color: #222222;
  line-height: 0.8rem;
}
.home_product_img{
  width: 7.5rem;
  display: block;
}
.home_product_ul{
  padding: 0.3rem;
  width: 6.9rem;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.home_product_ul li{
  width: 3rem;
  margin-bottom: 0.3rem;
}
.home_product_ul li:nth-child(2n){
  margin-left: 0.9rem;
}
</style>
